<template>
<div>
   <div class="mui-content">
        <div class="menuNav">
            <ul>
                <li class="mui-table-view-cell">
                    <div class="portrait-div">
                        <div class="img"><img :src="login_user.Photo | filterPhoto"></div>
                        <div class="phone">{{ login_user.Photo }}12323132</div>
                        <div class="username">{{ login_user.TrueName }}</div>
                    </div>
                </li>
                <li class="mui-table-view-cell" v-for="( item, index ) in menu" :key="index">
                    <router-link 
                        :to="item.path" class="mui-navigate-right" >
                        {{item.name}}
                    </router-link>
                </li>
            </ul>
            <div class="logout">
                <button type="button" class="mui-btn mui-btn-blue" @click="logout">退出登录</button>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapState ,mapMutations } from 'vuex'
import API from '@/service/api'
import { MessageBox } from 'mint-ui'
export default {
    data() {
        return {
            menu: []
        }
    },
    computed: {
        ...mapState( [ 'login_user', 'token' ] )
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING', 'LOGOUT' ] ),
        initialization() {
            API.getMenu( { token: this.token } ).then(res=> {
                this.menu = res
            })
            setTimeout(()=>{
                this.UPDATE_SHOW_LOADING(false)
            },500) 
        },
        logout() {
            MessageBox.confirm('是否退出登录?').then(action => {
                this.LOGOUT()
                this.$router.push({ name: 'login' })
            })
        }
    },
    created() {
       this.initialization()
    } 
}
</script>
<style lang="less" scoped>
.portrait-div{
    width: 100%;
    text-align: center;
    font-family: '微软雅黑';
    .img{
        width: 60px;
        height: 60px;
        margin: auto;
        img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    }
    .phone{
        margin-top: 10px;
    }
}
.logout{
    width: 100%;
    overflow: hidden;
    button{
        width: 80%;
        height: 50px;
        display: block;
        margin: 30px auto;
    }
}
</style>
